<template>
	<view class="con">
		<view class="flex-ju-b size28 mt60 mb30">
			<view @click="tablist(index)" class="flex-ju-c flex-col color999" :class="{active:tindex==index}" v-for="(item,index) in ['我的课程','词汇量版','考试专属版','其他课程']">
				{{item}}
				<view class="wh32-12 ra4  mt8">
					<image v-if="tindex==index" mode="widthFix" src="/static/tuibottom.png" class="image width32"></image>
				</view>
			</view>
		</view>
		<view class="bgF9F9F9 ra20 flex-a-i">
			<view class="flex-a-i bgF9F9F9 flex1 ra20 height80">
				<image mode="widthFix" src="/static/sou.png" class="image mr20 ml30 width40"></image>
				<input confirm-type="search" @confirm="tapsearch" placeholder-style="color:#898D92;" class="size28 flex1" v-model="key" placeholder="请输入要查询课程" />
				<image v-if="iskey" mode="widthFix" src="/static/close.png" class="image  mr20 width40"></image>
			</view>
		</view>
		<nodata v-if="isdata"></nodata>
		<view v-for="(item,index) in couserlist" :key="index" @click="goxue(item)" class=" flex-a-i pg30-15  border-bECEDEE">
			<view>
				<image mode="widthFix" :src="item.coverImage?item.coverImage:item.courseCards" class="wh290-164 ra20"></image>
			</view>
			<view class="ml10 flex1">
				<view class=" height164 flex-ju-b flex-col"  style="align-items: start;">
				<view class="size28 bold one">{{item.courseName}}</view>
				<view class="size24 color666 two">{{item.summary}}</view>
				<view class="flex-ju-b width1000 ">
					<view class="size24 color666">共{{item.wordCount}}词</view>
					<view v-if="item.isLearning" class="bgf9f9f9  ra10 size24 wh140-50  bold flex-ju-c color666">正在学习</view>
					<view  v-else class="bgFFEAEE colorfff ra10 size24 wh140-50 colorFD2F55 bold flex-ju-c">去学习</view>
				</view>
			</view>
			</view>
		</view>
		
		
		<uni-popup ref="upke" type="bottom"  border-radius="20px 20px 0px 0">
			<view class="posire">
				<view class="posiab right30 top30 zindex5" @click="$refs.upke.close()">
					<image mode="widthFix" src="/static/closes.png" class="image  width65"></image>
				</view>
				<image mode="widthFix" src="/static/topup.png" class="image flex"></image>
				<view class=" posiab top-104 ml30">
					<image mode="widthFix" src="/static/xuexi.png" class="image flex width188"></image>
					<view class="color222 size48 bold">解锁课程</view>
				</view>
			</view>
			<view class="posire bgfff pt20 mt-1">
				<image mode="widthFix" src="/static/gengbg.png" class="image posiab flex bottom0"></image>
				<view class="con " :style="{paddingBottom:bhh+'px'}">
					<view class="borderFFDEE4 ra20 flex-a-i pg25-20 ">
						<view>
							<image :src="learn.coverImage" class="image wh290-164 ra15"></image>
						</view>
						<view class="flex1 ml15">
							<view class="one size28 bold">{{learn.courseName}}</view>
							<view class="two color666">{{learn.summary}}</view>
							<view class="flex-ju-b mt10 mb10">
								<text class="color666 size24">共{{learn.wordCount}} 词</text>
							</view>
							
						</view>
					</view>
					<view class=" mt20 posire">
						<view class="bg272727 colorFED6A1 size26 flex-ju-b ra30">
							<!-- <template v-if="item.discountPrice>0">
								<view class="size40 colorFD2F55 bold"><text
										class="size22">￥</text>{{item.discountPrice}}</view>
								<view class="size24 color666 deleted-text">{{item.originalPrice}}</view>
							</template>
							<view v-else class="size40 colorFD2F55 bold"><text
									class="size22">￥</text>{{item.originalPrice}}</view> -->	
							
							<view v-if="learn.discountPrice>0" class="flex-ju-c pl30">
								限时优惠<text class="ml10">¥ </text><text class="size48 pb10 mr10"> {{learn.discountPrice}}</text><text  class="deleted-text">¥{{learn.originalPrice}}</text>
							</view>
							<view v-else class="flex-ju-c pl30">
								限时优惠<text class="ml10">¥ </text><text class="size48 pb10 mr10"> {{learn.originalPrice}}</text>
							</view>
							
							<image @click="tapcourser" mode="widthFix" src="/static/toujie.png" class="image wh264 ra15"></image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="upxue" type="bottom" @change="changeup" border-radius="20px 20px 0px 0">
			<view class="posire">
				<view class="posiab right30 top30 zindex5" @click="$refs.upxue.close()">
					<image mode="widthFix" src="/static/closes.png" class="image  width65"></image>
				</view>
				<image mode="widthFix" src="/static/topup.png" class="image flex"></image>
				<view class=" posiab top-104 ml30">
					<image mode="widthFix" src="/static/xuexi.png" class="image flex width188"></image>
					<view class="color222 size48 bold">正在学习</view>
				</view>
			</view>
			<view class="posire bgfff pt20 mt-1">
				<image mode="widthFix" src="/static/gengbg.png" class="image posiab flex bottom0"></image>
				<view class="con " :style="{paddingBottom:bhh+'px'}">
					<view class="borderFFDEE4 ra20 flex-a-i pg25-20 ">
						<view>
							<image :src="learn.coverImage" class="image wh290-164 ra15"></image>
						</view>
						<view class="flex1 ml15">
							<view class="one size28 bold">{{learn.courseName}}</view>
							<image @click="navto('vocabulary_list?id='+learn.courseId),$refs.upxue.close()"
								mode="widthFix" src="/static/xibbiao.png" class="image width65 flex mt10 mb10"></image>
							<view class="flex-ju-b mt10 mb10">
								<text class="color666 size24">共{{learn.wordCount}} 词</text>
							</view>
							<progress border-radius="5" :percent="(learn.leanRootCount/learn.allRootCount * 100).toFixed(2)"
								activeColor="#FD3A5E" backgroundColor="#EBEFF0" stroke-width="5" />
						</view>
					</view>
					<view class="flex-ju-b mt20 posire">
						<view @click="$refs.upxue.close()" class="bg000 flex1 colorfff flex-ju-c ra20 mr20 size36 height100 mt30">
							更换课程
						</view>
						<view @click="kaishiswi" class="bgFD3A5D colorfff flex-ju-c ra20 size36 height100 mt30 width438">
							开始学习
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- <uni-popup ref="upxue" type="bottom" @change="changeup" background-color="#fff" border-radius="20px 20px 0px 0">
			<view class="con pt40" :style="{paddingBottom:bhh+'px'}">
				<view class="flex-ju-b">
					<view class="size36 bold">
						
					</view>
					<view @click="$refs.upxue.close()">
						<uni-icons type="closeempty" size="20"></uni-icons>
					</view>
				</view>
				<view class="bgF9F9F9 ra20 flex-a-i pg25-20 mt20">
					<view>
						<image  :src="learn.courseCards" class="image wh215-120 ra15"></image>
					</view>
					<view class="flex1 ml15">
						<view class="one size32 bold">{{learn.courseName}}</view>
						<view class="flex-ju-b mt10 mb10">
							<text class="color666 size24">{{learn.wordCount}} 词</text>
							<view class="flex-a-i">
								<image @click="navto('vocabulary_list?id='+learn.courseId),$refs.upxue.close()" mode="widthFix" src="/static/xibbiao.png" class="image width65 flex"></image>
							</view>
						</view>
						<progress :percent="(learn.leanRootCount/learn.allRootCount * 100).toFixed(2)" activeColor="#000" stroke-width="3" />
					</view>
				</view>
				
				<view @click="kaishiswi" class="bg000 colorfff flex-ju-c ra20 size36 height100 mt30">
					开始学习
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item:{},
				isdata:false,
				tindex:0,
				couserlist:[],
				key:"",
				learn:{}
			}
		},
		mounted() {
			// this.$refs.upke.open()
			
		},
		onLoad() {
			// this.getlist()
			this.getdata()
			
		},
		onReachBottom() {
			this.page++
			this.getdata()
		},
		methods: {
			kaishiswi(){
				this.http('/api/course/updateLearn?courseId='+this.learn.courseId,{
					courseId:this.learn.courseId
				}).then(res=>{
					this.couserlist.map(item=>{
						item.isLearning=false
					})
					this.learn.isLearning=true
					uni.setStorageSync('courseid',this.learn.courseId)
					this.navto('vocabulary_list?id='+this.learn.courseId)
					this.$refs.upxue.close()
				})
				
			},
			tapcourser(){
				this.http('/api/orderMain/pay',{
					courseId:this.learn.courseId
				}).then(res=>{
					uni.requestPayment({
					    provider: 'weixin',
					    orderInfo: 'orderInfo',
						timeStamp:res.data.timeStamp,
						nonceStr:res.data.nonceStr,
						package:res.data.prepayId,
						signType:res.data.signType,
						paySign:res.data.paySign,
					    success:  (res)=> {
					        this.toast('支付成功')
							this.$refs.upke.close()
							this.getdata()
					    },
					    fail:  (err)=> {
							this.toast('支付失败')
					    }
					});
				})
			},
			goxue(item){
				this.learn = item
				console.log(item)
				// this.$refs.upxue.open()
				
				if(item.isToll==1){
					this.item=item
					this.$refs.upke.open()
				}else{
					 this.$refs.upxue.open()
					// uni.navigateTo({
					// 	url:"vocabulary_list?id="+item.courseId
					// })
				}
			},
			tapsearch(){
				this.getdata()
			},
			usercouse(){
				this.http('/api/wxUser/userCourse',{
				}).then(res=>{
					this.couserlist=res.data
					this.nodata(this.couserlist,this)
				})
			},
			getlist(data){
				this.http('/api/course/home',data,'post').then(res=>{
					if(res.data.length){
						var arr =[]
						res.data.map(item=>{
							arr.push(item.imageId)
						})
						
						this.httpimg(arr).then(ress=>{
							ress.data.map(item=>{
								res.data.map(items=>{
									if(item.fileId == items.imageId){
										items.coverImage = item.fileUrl
									}
								})
							})
							
							this.couserlist = [...this.couserlist,...res.data]
							this.nodata(this.couserlist,this)
						})
						}else{
						this.couserlist = [...this.couserlist,...res.data]
						this.nodata(this.couserlist,this)
					}
				 
				 
				})
			},
			tablist(index){
				this.couserlist=[]
				this.page=1
				this.tindex = index
				this.getdata()
			},
			getdata(){
				var data ={
					pageNo:this.page,
					pageSize:10,
					courseName:this.key,
				}
				if(this.tindex==0){
					// this.usercouse()
					data.courseType=5
				}else{
					data.courseType=this.tindex
				}
				this.getlist(data)
				 
				//  if(this.tindex==1){
				// 	data.courseType=2
				// 	this.getlist(data)
				// }else if(this.tindex==2){
				// 	data.courseType=3
				// 	this.getlist(data)
				// }else if(this.tindex==3){
				// 	data.courseType=4
				// 	this.getlist(data)
				// }
			}
		}
	}
</script>

<style>
.deleted-text {
		text-decoration: line-through;
	}
	.active{
		color:#222;
		font-weight: 600;
	}
</style>
